<template>
<div class="stockAnalysis">
  <ul class="timePick">
    <li v-for="item,index in times" :class="{'active':index==setStockTime}" @click="chooseTime(item,index)">{{item.text}}</li>
  </ul>
  <div class="blank"></div>
  <div class="title">
    <span class="fl">证券名称</span>
    <span class="fl">盈亏金额</span>
    <span class="fl">持有天数</span>
    <span></span>
  </div>
  <div class="stockList" v-show='status == 0'>
    <load-more class="load-more" :bottom-method="loadBottom" :auto-fill='autoFill' ref='loadmore'>
      <ul>
        <li v-for='item in detail'>
          <div class="stockName">
            <span v-text='item.name'></span>
            <span v-text='item.stockNumber'></span>
          </div>
          <div class="amount" v-text='item.value' :class='item.textColor'></div>
          <div class="date" v-text='item.sum_is_hold.value'></div>
          <router-link :to='{path:"/pages/TeansctionDet",
                             query:{stock:item.stockNum,
                               time:queryConf.tradedate,
                               money:item.value,
                               holdDays:item.sum_is_hold.value,
                               stockName:item.name,
                               marketCode:item.marketCode,
                               recentThr:times[1].dateTime,
                               stockNumber:item.stockNumber}
                               }'>
            <div class="teansction fr" v-text='item.exchange' v-show='item.isExchange'></div>
          </router-link>
        </li>
      </ul>
    </load-more>
  </div>
  <return-empty v-if='status == 1'></return-empty>
  <return-error v-if='status == 2'></return-error>
</div>
</template>

<script>
import RemoteDAO from '@/common/remoteDAO'
import LoadMore from '@/components/common/LoadMore'
import Cache from '@/common/cache'

export default {
  // props: ['stockstatus'],
  data() {
    return {
      queryConf: {
        tradedate: '',
        pagenum: 20,
        pagesize: 1
      },
      autoFill: false,
      times: [{
          name: 'curmonth',
          text: '本月',
          dateTime: '',
          active: 'active'
        },
        {
          name: 'recentThreeMonths',
          text: '近三个月',
          dateTime: '',
          active: ''
        },
        {
          name: 'recentHalfYear',
          text: '近半年',
          dateTime: '',
          active: ''
        },
        {
          name: 'thisYear',
          text: '今年',
          dateTime: '',
          active: ''
        },
        {
          name: '2016',
          text: '2016',
          dateTime: '',
          active: ''
        }
      ],
      detail: [],
      timeEvent: ['002002', '002003', '002004', '002005', '002006'],
      exchange: '',
      isExchange: '',
      setStockTime: null,
      status: 0,
      time: 0
    }
  },
  created() {
    this.setStockTime = this.$store.state.selStockTime;
    this.$emit('changetime', this.setStockTime);
    this.initStock();
  },
  // watch: {
  //   stockstatus: function() {
  //     console.log('变化了');
  //   }
  // },
  components: {
    LoadMore
  },
  methods: {
    chooseTime(item, index) {
      if (this.time != index) {
        TDAPP.onEvent(this.timeEvent[index], '');
        TDAPP.send();
      }
      this.time = index
      this.setStockTime = index
      this.$emit('changetime', index);

      this.$store.dispatch('setStockTime', index);

      this.queryConf.tradedate = this.times[index].dateTime;
      this.queryConf.pagesize = 1;
      this.$refs.loadmore.reset();
      this.detail = [];
    },
    loadBottom() {
      let vm = this;

      vm.fetchData(function(allLoaded, error) {
        if (vm.$refs.loadmore) {
          if (error !== null) {
            vm.$refs.loadmore.onBottomError(error); //单次加载失败或者没有数据，error为报错信息，如果是没有数据，写暂无数据
          } else if (allLoaded) {

            vm.$refs.loadmore.onBottomAllLoaded(); //全部数据加载完成
          } else {
            vm.$refs.loadmore.onBottomLoaded(); //单次加载成功
          }
        }
      });
    },
    initStock() {
      let vm = this
      let obj0031 = {}
      RemoteDAO.callZL13100031(obj0031, vm.ZL13100031);
    },
    ZL13100031(result) {
      let data = result.data;
      let bigdata = JSON.parse(data).body[0].bigdata;
      let hits = JSON.parse(bigdata).hits.hits;
      hits.forEach((item, i) => {
        let nowTime = item._source.recent;
        switch (nowTime) {
          case 'curmonth':
            this.times[0].dateTime = item._source.begin_date + '~' + item._source.end_date;
            break;
          case 'quarter':
            this.times[1].dateTime = item._source.begin_date + '~' + item._source.end_date;
            break;
          case 'halfyear':
            this.times[2].dateTime = item._source.begin_date + '~' + item._source.end_date;
            break;
          case 'year':
            this.times[3].dateTime = item._source.begin_date + '~' + item._source.end_date;
            break;
        };
      })
      this.times[4].dateTime = '20160101~20161231';
      this.queryConf.tradedate = this.times[this.setStockTime].dateTime;
      this.times.forEach(function(item, index) {
        item.active = ''
      })
      this.times[this.setStockTime].active = 'active'
      this.autoFill = true;
      if (this.$refs.loadmore) {
        this.$refs.loadmore.reset();
      }
    },
    fetchData(afterFetchData) {
      let vm = this,
        allLoaded = false,
        error = null;
      RemoteDAO.callZL13100045(vm.queryConf, (result) => {
        if (result.error == '1') {
          vm.status = 2
          error = ''
        } else {
          let data = result.data;
          let bigdata = JSON.parse(data).body[0].bigdata;
          let detailDate = JSON.parse(bigdata);
          if (detailDate.length == 0) {
            vm.status = 1
            error = ''
          } else {
            detailDate.forEach(function(item, i) {
              let arr = item.key.split('-');
              item.stockNum = arr[0]
              item.marketCode = arr[1]
              arr[1] == 1 ? item.stockNumber = 'SH' + arr[0] :
                (arr[1] == 2 ? item.stockNumber = 'SZ' + arr[0] : item.stockNumber = arr[0])

              arr[1] == 1 ? item.exchange = '交易明细' :
                (arr[1] == 2 ? item.exchange = '交易明细' : item.exchange = '')

              arr[1] == 1 ? item.isExchange = true :
                (arr[1] == 2 ? item.isExchange = true : item.isExchange = false)

              item.value = parseFloat(item.sum_day_profit.value.toFixed(2))

              if (Math.abs(item.value) > 100000) {
                Math.abs(item.value) < 100000000 ? item.value = (item.value / 10000).toFixed(2) + '万' :
                  item.value = (item.value / 100000000).toFixed(2) + '亿'
              }

              parseFloat(item.value) >= 0 ? item.textColor = 'proColor' : item.textColor = 'lossColor'
              item.name = arr[2];
              vm.detail.push(item);
            });
            vm.queryConf.pagesize++;
            if (vm.detail.length == 0) {
              error = ''
            } else if (detailDate.length < vm.queryConf.pagenum) {
              allLoaded = true
            }
          }
        }

        afterFetchData(allLoaded, error);
      });
    }
  }
}
</script>

<style scoped>
.load-more {
  padding-bottom: 120px;
}

.timePick {
  height: 78px;
  box-shadow: 0 2px 10px 0 rgba(34, 34, 34, 0.2);
  font-size: 28px;
  padding: 0 10px;
  color: #555;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  background: #fff;
  width: 100%;
  position: relative;
  z-index: 9;
}

.timePick li {
  height: 78px;
  line-height: 78px;
  padding: 0 22px;
}

.timePick .active {
  color: #309fea;
  border-bottom: 8px solid #309fea;
  box-sizing: border-box;
}

.blank {
  box-shadow: 0 2px 10px 0 rgba(34, 34, 34, 0.2);
}

.title {
  height: 104px;
  font-size: 28px;
  padding-left: 40px;
  color: #555;
  border-bottom: 1px solid #ddd;
  background-color: white;
}

.title span {
  display: inline-block;
  width: 26%;
  line-height: 104px;
}

.title span:nth-child(n+2) {
  text-align: center;
}

.title span:nth-child(3) {
  width: 19%;
}

.title span:first-child {
  width: 32%;
}

.stockList ul {
  width: 100%;
  background-color: white;
}

.stockList ul li {
  height: 104px;
  font-size: 30px;
  padding-left: 40px;
  border-bottom: 1px solid #ddd;
}

.stockList ul li>div {
  width: 25%;
  font-size: 30px;
  height: 100%;
  float: left;
}

.stockList ul li .date {
  width: 17%;
}

.stockList ul li .stockName {
  width: 33%;
}

.stockName span {
  width: 100%;
  display: block;
}

.stockName span:first-child {
  margin-top: 20px;
  color: #1a1a1a;
}

.stockName span:last-child {
  font-size: 24px;
  color: #555;
}

.date,
.amount {
  line-height: 104px;
  text-align: center;
}

.proColor {
  color: #e31a2e;
}

.lossColor {
  color: #1ea241;
}



.teansction {
  display: inline-block;
  line-height: 104px;
  color: #309fea;
  font-size: 28px;
  margin-right: 60px;
}
</style>
